<template>
  <header
    class="topnew fixed peer group left-0 right-0 top-0 data-variant-dark:bg-white data-variant-dark:relative z-sticky px-11 py-4 flex items-center will-change-transform"
    :class="{ topheader: props.headerstyle, scrolled: scrollClass }"
  >
    <div class="flex items-center shrink-0 space-x-11">
      <router-link to="/">
        <img
          src="https://www.hynamic.cn/Public/static/img/logo.png"
          alt=""
          class="logo"
        />
      </router-link>
      <!-- <nav>
            <ul class="flex items-center space-x-5">
              <li><a href="#"
                  class="outline-none px-4 h-12 flex items-center justify-center rounded-[100px] transition text-lg font-medium shrink-0 text-white hover:bg-black-25 group-data-variant-dark:text-black group-data-variant-dark:hover:bg-neutral-20">找视频</a>
              </li>

            </ul>
          </nav> -->
    </div>
    <div class="flex-1 flex items-center justify-end">
      <div class="flex items-center space-x-1 mr-5 shrink-0">
        <button
          @click="openDialog"
          class="px-4 flex items-center justify-center rounded-[100px] transition font-medium shrink-0 text-white hover:bg-white-25 group-data-variant-dark:text-black group-data-variant-dark:hover:bg-neutral-20 text-base h-9 vip"
        >
          VIP授权
        </button>
      </div>
      <div v-if="!isLoggedIn" class="flex items-center justify-center">
        <button
          @click="openLogin"
          class="outline-none px-4 flex items-center justify-center rounded-[100px] transition font-medium shrink-0 text-white group-data-variant-dark:text-black text-base h-9 !text-white bg-black-50 hover:bg-black-80 group-data-variant-dark:bg-black group-data-variant-dark:hover:bg-neutral-60"
        >
          登录/注册
        </button>
      </div>
      <div v-else-if="isLoggedIn" class="flex items-center justify-center">
        <router-link to="/user" style="margin-right: 10px">
          <img src="@/assets/img/av.jpeg" alt="" class="avr" />
        </router-link>
        <button
          @click="outLogin"
          class="outline-none px-4 flex items-center justify-center rounded-[100px] transition font-medium shrink-0 text-white group-data-variant-dark:text-black text-base h-9 !text-white bg-black-50 hover:bg-black-80 group-data-variant-dark:bg-black group-data-variant-dark:hover:bg-neutral-60"
        >
          退出登录
        </button>
      </div>
    </div>
  </header>
  <!-- <div v-if="isOpen">
    <Login @colseLogin="colseLogin"></Login>
  </div> -->
  <!-- 登录框 -->
  <MyDialog @update:visible="updateLoginDialog" :initVisible="isLayer" :width="754">
    <!-- 这里可以放置对话框内容 -->
    <login @colseLogin="colseLogin"> </login>
    <!-- <login-new></login-new> -->
  </MyDialog>
  <!-- end -->
  <!-- 授权框 -->
  <MyDialog @update:visible="updateDialog" :initVisible="dialogVisible" :width="1200">
    <div class="closeBtn">
      <el-button @click="handleClose" circle><i class="iconfont">&#xe60e;</i></el-button>
    </div>
    <!-- 这里可以放置对话框内容 -->
    <AuthType @update:visible="updateDialog"> </AuthType>
  </MyDialog>
  <!-- 购物车 -->
  <cart v-if="isLoggedIn && !isBuyPage"></cart>
</template>

<script lang="ts" setup>
import { defineProps, PropType, ref, computed, watch } from "vue";
import { useScrollClass } from "../hooks/useScrollClass";
import Login from "./Login.vue";
import MyDialog from "./MyDialog.vue";
import cart from "./Cart.vue";
import { useRoute } from "vue-router";
import AuthType from "./AuthType.vue";
import { UserProps } from "@/common/utils/loginTpye";
import { useUserStore } from "@/store/loginStore";
import { getCurrentInstance } from "vue";

const userStore = useUserStore();
const props = defineProps({
  user: {
    type: Object as PropType<UserProps>,
    required: true,
  },
  headerstyle: {
    type: Boolean,
    deflaut: false,
  },
});
const scrollClass = useScrollClass();

// 打开登录框
// const isOpen = ref(false);
const isLayer = computed(() => userStore.isLayer as boolean);
const openLogin = () => {
  // console.log(userStore.registerdata, "登录乱");
  userStore.logindata.phone = "";
  userStore.logindata.smsCode = "";
  // isOpen = true;
  userStore.showDialog();
};

const updateLoginDialog = () => {
  // console.log(dialogVisible, "!23");
  userStore.hideDialog();
};
// 关闭登录框
const colseLogin = () => {
  // isOpen.value = newVue;
  userStore.hideDialog();
};

// 打开授权框
const dialogVisible = ref(false);
const openDialog = () => {
  // console.log(dialogVisible, "!23");
  dialogVisible.value = true;
};
const updateDialog = (value: boolean) => {
  // console.log(dialogVisible, "!23");
  dialogVisible.value = value;
};
const handleClose = () => {
  dialogVisible.value = false;
  // isOpen.value = false;
};

// 判断是否登录

const isLoggedIn = computed(() => userStore.isLogin);

// 退出登录
const router = useRoute();
const outLogin = () => {
  // console.log("退出登录");
  // console.log(router.fullPath);
  userStore.logout(router.fullPath);
};
// 判断router.fullPath
const isBuyPage = ref(false);
watch(
  () => router.name,
  (newVal) => {
    console.log(newVal, "什么页面");
    if (newVal == "buy") {
      isBuyPage.value = true;
    } else {
      isBuyPage.value = false;
    }
  }
);

//接收其他组件的事件方法
const instance = getCurrentInstance();
instance?.proxy?.$Bus.on("h-click", () => {
  openLogin();
});
</script>

<style scoped lang="scss">
.logo {
  width: 150px;
}
.avr {
  width: 40px;
  height: 40px;
  border-radius: 100%;
}
.topnew {
  background: #fff;
}
.topheader {
  background: rgba(255, 0, 0, 0);
}
@keyframes gradientAnimation {
  0% {
    background: rgba(255, 0, 0, 0);
  }

  100% {
    background: #fff;
  }
}

.scrolled {
  background: rgb(255, 248, 248);
  animation: gradientAnimation 1s ease;

  .logo {
    width: 180px;
    transition: width 1s;
  }
}

.scrolled .bg-black-50 {
  background: rgb(255, 248, 248);
  border: 2px solid red;
  color: red !important;
  transition: color 0.5s;
}
.topnew .vip {
  color: #000;
  font-size: 16px;
}
.topheader .vip {
  color: #fff;
}
.scrolled .vip {
  color: #000;
}
.closeBtn {
  padding: 30px 30px 0 0;
  text-align: right;
}
.cart {
  background: red;
  position: fixed;
  z-index: 10;
  right: 30px;
}
</style>
